<script setup lang="ts">
import { ref } from "vue";
import type { DetailMapItemType, PreviewDetailType } from "./types";

const props = defineProps<{
	/** 字段映射及配置 */
	mapList: DetailMapItemType[];
	/** 详情数据 */
	detail: any;
}>();

const cellData = ref<PreviewDetailType[]>([]);

const init = () => {
	props.mapList.forEach(item => {
		cellData.value.push({
			title: item.label,
			value: item.formatter
				? item.formatter(props.detail[item.field], item)
				: item.enums
				? (item.enums.find(e => e.value === props.detail[item.field])?.label as string)
				: (props.detail[item.field] as string) ?? "-",
			key: item.field,
			slotName: item.slotName
		});
	});
};
init();
</script>

<template>
	<van-cell-group v-bind="$attrs">
		<van-cell
			v-for="(cell, index) in cellData"
			:key="cell.key ?? index"
			title-class="cell-title"
			value-class="cell-value"
			:title="cell.title"
		>
			<template #value>
				<span v-if="!cell.slotName">{{ typeof cell.value === "string" ? cell.value : "-" }}</span>
				<slot v-else :name="cell.slotName" :row="cell"></slot>
			</template>
		</van-cell>
	</van-cell-group>
</template>

<style scoped lang="less">
:deep(.van-cell) {
	.cell-title {
		width: 115px;
		flex: auto;
		flex-grow: 0;
		flex-shrink: 0;
	}
	.cell-value {
		white-space: pre-wrap;
		text-align: left;
	}
}
</style>
